<script setup>
import { ref, onMounted, nextTick } from 'vue'
defineProps(['activeIndex'])
</script>

<template>
    <div class="home_container">
        <div class="spline_wrapper">
            <iframe src='https://my.spline.design/trails-98b35a632b958fc91a530338b736112c/' frameborder='0' width='100%' height='100%' id="spline"></iframe>
        </div>
        <div class="home_content">
            <div class="home_title animate__animated animate__fadeInUp animate__delay-1s">
                Hi, my <br/>name is Wang Wei. 
            </div>
            <div class="home_text animate__animated animate__fadeInUp animate__delay-2s">Welcome to my homepage</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.home_container {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .spline_wrapper {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        display: none;
    }

    .home_content {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 60px;
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            width: 160vw;
            height: 100%;
            background: linear-gradient(#000 10%, #D78C85);
            position: absolute;
            bottom: -60%;
            left: -30vw;
            animation: wave-animation 10s linear infinite alternate;
            z-index: 1;
        }
        .home_title{
            position: relative;
            width: 50%;
            font-size: 100px;
            line-height: 100px;
            color: #fff;
            z-index: 2;
        }
        .home_text{
            position: relative;
            width: 50%;
            z-index: 2;
            font-size: 30px;
            line-height: 30px;
            color: #fff;
        }
    }

    @keyframes wave-animation {
        0% {
            border-radius: 30% 70% 100% 100%/38% 67% 33% 62%;
        }

        to {
            border-radius: 40% 60%;
        }
    }
}
</style>
